<style include="common-style untrusted-style">
  :host {
    margin: 12px 0;
  }
  .photo-images-container img.left {
    clip-path: inset(0 50% 0 0);
    position: absolute;
  }
  .photo-images-container img.right {
    clip-path: inset(0 0 0 50%);
    position: absolute;
  }
</style>
<iron-list scroll-target="document" grid items="[[tiles_]]" role="listbox"
    aria-setsize$="[[tiles_.length]]">
  <template>
    <div class="photo-container">
      <div class="photo-inner-container" tabindex$="[[tabIndex]]" role="option"
          data-asset-id$="[[item.assetId]]"
          data-unit-id$="[[item.unitId]]" on-click="onImageSelected_"
          on-keypress="onImageSelected_"
          aria-posinset$="[[getAriaIndex_(index)]]"
          aria-selected$="[[getAriaSelected_(item, selectedAssetId_, pendingSelectedAssetId_)]]"
          aria-label$="[[getAriaLabel_(item)]]">
        <div class="photo-images-container">
          <template is="dom-repeat" items="[[item.preview]]" as="preview">
            <img class$="[[getClassForImg_(index, item)]]" src$="[[preview.url]]" aria-hidden="true">
          </template>
          <iron-icon icon="personalization:checkmark"></iron-icon>
        </div>
      </div>
    </div>
  </template>
</iron-list>
